<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件中数据的存储</title>
  <script src="/js/vue.js"></script>
	<style>

	</style>
</head>
<body>
  <div id="app">
	<!-- 3. 使用组件 -->
    <my-cpn></my-cpn>
  </div>
<br>
	 <template id="cpn">
		<div>
			<h2>这是父组件的标题11</h2>
			<p>这是父组件的内容</p>
			<button @click="increase()">这是父组件的按钮+</button>
			<button @click="decrease()">这是父组件的按钮-</button>
			<p>这是父组件的计数{{counter}}</p>
			<son-cpn></son-cpn>
			<p>{{msg}}</p>
		</div>
	</template>

	<template id="cpn2">
		<div>
			<h2>这是子组件的标题</h2>
			<p>这是子组件的内容</p>
			<button>这是子组件的按钮</button>
		</div>
	</template>	

  <script>
    let app = new Vue({//根组件
      el:"#app",
      data:{ // 实例中data 键值对，value是对象
        msg:'hello world'
      },
			methods:{

			},
			components:{
				'my-cpn':{//父组件
					template:'#cpn',
					data(){ // 组件内的data 键值对 value必须是一个函数，且要返回一个对象
						return {
							 msg:'hello world',
							 counter:0
						}
					},
					methods:{
						increase(){
							console.log(this);
							this.counter++
						},
						decrease(){
							this.counter--
						}
					},
					components:{
						'son-cpn':{
							template:'#cpn2'
						}
					}
				}
			}
    })
  </script>
</body>
</html>


